<div class="control" [ngClass]="themeClass">
    <layout-header (childOuter)="themeChenge($event)"></layout-header>
    <nz-affix nzOffsetTop="48">
        <div class="station" style="border-bottom:2px solid #dedede">
            <div class="wrap">
                <span class="name">车站名称：</span>
                <nz-tree-select [nzDropdownStyle]="treeNodeStyle" style="width: 180px"
                    [nzDropdownMatchSelectWidth]="false" [nzNodes]="stationSelect" nzShowSearch [(ngModel)]="stationId"
                    (ngModelChange)="stationChange($event)">
                </nz-tree-select>
            </div>
            <div class="wrap">
                <span class="name">时间选择：</span>
                <nz-date-picker nz-popover nzContent="点击选择时间" nzPlacement="right" nzShowTime [(ngModel)]="sjNameText"
                    [nzStyle]="{'width':'180px'}" nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="请选择时间"
                    (ngModelChange)="onOk($event)" (nzOnOk)="onOk($event)"></nz-date-picker>
            </div>
            <div class="wrap">
                <span class="name">设备类型：</span>
                <span style="width: 180px;">
                    <nz-tree-select *ngIf="devTypeIf" [nzDropdownStyle]="treeNodeStyle" style="width: 180px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="devTypeSelect" nzShowSearch
                        [(ngModel)]="devTypeId" (ngModelChange)="devTypeChange($event)">
                    </nz-tree-select>
                </span>
            </div>
            <div class="wrap">
                <span class="name">报警类型：</span>
                <span style="width: 180px;">
                    <nz-tree-select *ngIf="alarmTypeIf" [nzDropdownStyle]="treeNodeStyle" style="width: 180px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="alarmTypeSelect" nzShowSearch
                        [(ngModel)]="alarmTypeId" (ngModelChange)="alarmTypeChange($event)">
                    </nz-tree-select>
                </span>
            </div>
            <div class="wrap">
                <span class="name">报警设备：</span>
                <nz-select [nzDropdownClassName]="selectClass" nzShowSearch [(ngModel)]="devNameId"
                    (ngModelChange)="devNameChange($event)" style="width:160px;">
                    <nz-option *ngFor="let data of devTreeNodes" nzCustomContent [nzValue]="data.id"
                        [nzLabel]="data.name"> {{data.name}}</nz-option>
                </nz-select>
            </div>
            <div class="wrap">
                <span class="name">处置流程：</span>
                <nz-select nz-popover nzContent="点击选择处置流程，可输入名称搜索" nzPlacement="right"
                    [nzDropdownClassName]="selectClass" nzShowSearch style="width: 280px;" [(ngModel)]="stepNameId">
                    <nz-option *ngFor="let data of stepNameSelect" nzCustomContent [nzValue]="data.id"
                        [nzLabel]="data.name"> {{data.name}}</nz-option>
                </nz-select>
            </div>
            <button nz-popover nzContent="点击进入应急页面" nzPlacement="right" nz-button nzType="primary" class="emergency"
                (click)="command()">
                <i nz-icon nzType="info-circle" nzTheme="outline"></i>启动应急
            </button>
        </div>
    </nz-affix>
    <div style="clear:both"></div>

    <div class="mnl">
        <div [innerHTML]="mnlIframe" style="height:610px"></div>
        <app-maskiframe #maskiframe [iframewidth]="'1876'" [iframeheight]="'610'"></app-maskiframe>
    </div>

    <div class="listTabs">
        <nz-tabset [(nzSelectedIndex)]="selectedIndex" [nzTabBarStyle]="tabBarStyle">
            <nz-tab [nzTitle]="titleTemplate3">
                <ng-template #titleTemplate3>
                    <i nz-icon nzType="profile" class="m0"></i><span>设备检修记录表</span>
                </ng-template>
                <div class="m020">
                    <div class="menu jxjl"><span>检修时间</span><span>检修类型</span><span>检修人</span></div>
                    <ul class="list jxjl">
                        <li *ngFor="let data of jxjlData;index as i">
                            <span>{{data.time}}</span><span>{{data.type}}</span><span>{{data.human}}</span>
                        </li>
                    </ul>
                </div>
            </nz-tab>
            <nz-tab [nzTitle]="titleTemplate4">
                <ng-template #titleTemplate4>
                    <i nz-icon nzType="audit" class="m0"></i><span>设备问题记录表</span>
                </ng-template>
                <div class="m020">
                    <div class="button" style="padding-left:10px">
                        <div class="fl warnwrap">
                            <b class="warning w1"></b> I级&nbsp;&nbsp;&nbsp;
                            <b class="warning w2"></b> II级&nbsp;&nbsp;&nbsp;
                            <b class="warning w3"></b> III级
                        </div>
                    </div>
                    <div class="menu wtjl"><span>发生时间</span><span>发现人</span><span>问题等级</span><span>问题描述</span></div>
                    <ul class="list wtjl">
                        <li *ngFor="let data of wtjlData;index as i">
                            <span>{{data.time}}</span>
                            <span>{{data.human}}</span>
                            <span>
                                <b
                                    [ngClass]="{'w1':data.level == '1','w2':data.level == '2','w3':data.level == '3'}"></b>
                                <strong style="font-weight:normal;" *ngIf="data.level == '1'"> I级</strong>
                                <strong style="font-weight:normal;" *ngIf="data.level == '2'"> II级</strong>
                                <strong style="font-weight:normal;" *ngIf="data.level == '3'"> III级</strong>
                            </span>
                            <span>{{data.desc}}</span>
                        </li>
                    </ul>
                </div>
            </nz-tab>
            <nz-tab [nzTitle]="titleTemplate5">
                <ng-template #titleTemplate5>
                    <i nz-icon nzType="exception" class="m0"></i><span>同类型报警案例表</span>
                </ng-template>
                <div class="m020">
                    <div class="menu bjal">
                        <span>发生时间</span><span>发生地点</span><span>设备名称</span><span>故障信息</span><span>外置建议</span></div>
                    <ul class="list bjal">
                        <li *ngFor="let data of bjalData">
                            <span>{{data.time}}</span><span>{{data.address}}</span><span>{{data.name}}</span><span>{{data.info}}</span><span>{{data.adv}}</span>
                        </li>
                    </ul>
                </div>
            </nz-tab>
            <nz-tab [nzTitle]="titleTemplate6">
                <ng-template #titleTemplate6>
                    <i nz-icon nzType="file-sync" class="m0"></i><span>设备历史故障信息表</span>
                </ng-template>
                <div class="m020">
                    <div class="menu gzxx">
                        <span>发生时间</span><span>发生地点</span><span>设备名称</span><span>故障信息</span><span>外置建议</span></div>
                    <ul class="list gzxx">
                        <li *ngFor="let data of gzxxData">
                            <span>{{data.time}}</span><span>{{data.address}}</span><span>{{data.name}}</span><span>{{data.info}}</span><span>{{data.adv}}</span>
                        </li>
                    </ul>
                </div>
            </nz-tab>
            <nz-tab [nzTitle]="titleTemplate2">
                <ng-template #titleTemplate2>
                    <i nz-icon nzType="message" class="m0"></i><span>处置建议</span>
                </ng-template>
                <app-controlczjy #controlczjy [nid]="''" [czjyAlarmType]="czjyAlarmType"></app-controlczjy>
            </nz-tab>
        </nz-tabset>
    </div>
</div>